<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
            color: #666;
            font-size: 14px;
            line-height: 1.5;
            font-family: PingFang SC, Hiragino Sans GB, WenQuanYi Micro Hei, tahoma, sans-serif;
        }

        .cd {
            height: 40px;
            line-height: 40px;
            margin-bottom: 20px;
            background-color: #fff;
            box-shadow: 0 3px 5px 0 rgb(0 0 0);
            border-radius: 4px;
            text-align: center;
            font-size: 14px;
            color: #666;
        }

        .icon-sand {
            width: 20px;
            height: 20px;
            vertical-align: middle;
            background-position: 0 -63px;
        }

        .icon, .icon-sand {
            display: inline-block;
        }

        .icon {
            font-size: 0;
            background-image: url(https://mpay.meituan.com/resource/cashier/img/icon-common@2x.rcJBe.png);
            background-size: 168px;
        }

        .cd-text {
            margin-left: 8px;
            vertical-align: middle;
        }

        .cd-time {
            color: #f60;
            font-size: 18px;
        }


        .order {
            line-height: 24px;
            padding: 20px;
            background: #fff;
            border-radius: 4px;
            margin-bottom: 10px;
        }

        .order-name {
            font-size: 20px;
            color: #222;
            width: 600px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 15px;
        }

        .order .block-left {
            width: 75%;
            position: relative;
        }

        .block-left, .block-right {
            width: 50%;
            float: left;
        }

        .order .block-right {
            width: 25%;
        }

        .block-right {
            text-align: right;
        }

        .block-left, .block-right {
            width: 50%;
            float: left;
        }

        .amount {
            text-align: right;
            font-size: 14px;
            color: #f60;
        }

        .amount-price {
            font-size: 30px;
            font-family: arial, sans-serif;
        }

        .payment-container {
            background: #fff;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            padding: 0 20px 50px;
        }

        .payment {
            margin-top: 30px;
        }

        .payment-type {
            position: relative;
        }

        .payment-menu {
            height: 39px;
        }

        .payment-0 .payment-tab-0, .payment-1 . payment-tab-1, .payment-2 . payment-tab-2 {
            color: #000;
            background: #fff;
            border: 1px solid #ddd;
            border-radius: 2px;
        }

        .payment-tab {
            float: left;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            line-height: 20px;
            padding: 9px 15px;
            border: 1px solid transparent;
            _border-color: tomato;
            _filter: chroma(color=tomato);
        }

        .payment-tips {
            top: 11px;
            right: 0;
            font-size: 12px;

        }

        ul {
            padding: 0;
            list-style: none;
        }

        .payment-tips li {
            float: right;
            line-height: 22px;
            margin-left: 15px;
        }

        .payment-tips li {
            float: right;
            line-height: 22px;
            margin-left: 15px;
        }

        . payment-dropdown {
            cursor: pointer;
            position: relative;
            padding-right: 15px;
            display: inline-block;
        }

        .payment-list li {
            float: left;
            width: 214px;
            cursor: pointer;
            margin: 0 0 10px;
        }

        .payment-list input {
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }

        .payment-icon {
            position: relative;
            cursor: pointer;
            margin-left: 10px;
            display: inline-block;
            border: 1px solid #e5e5e5;
            border-radius: 2px;
            padding-right: 4px;
        }

        .payment-icon img {
            width: 150px;
            height: 40px;
        }

        img {
            border: 0;
            vertical-align: middle;
        }

        .payment-0 .payment-tab-0, .payment-1 .payment-tab-1, .payment-2 .payment-tab-2 {
            color: #000;
            background: #fff;
            border: 1px solid #ddd;
            border-bottom: 1px solid #fff;
            border-radius: 2px;
        }

        .payment-submit-area {
            margin-top: 50px;
        }

        .amount {
            text-align: right;
            font-size: 14px;
            color: #f60;
        }

        .amount-price {
            font-size: 30px;
            font-family: arial, sans-serif;
        }

        .payment-back, .payment-submit {
            float: right;
            margin-top: 14px;
        }

        .payment-submit .btn {
            font-size: 14px;
            padding: 10px 36px;
            border: none;
        }

        .btn {
            background-color: #f90;
            border-radius: 100px;
            background-image: linear-gradient(
                    180deg, #ffa114, #f59300);
            color: white;
            outline: none;
            cursor: pointer;
        }

        .payment-back a {
            font-size: 18px;
            color: #666;
            text-decoration: none;
        }

        .payment-back {
            line-height: 30px;
            margin-right: 20px;

        }


    </style>

</head>
<body>
<div id="controller">
    <div class="cd">
        <i class="icon icon-sand"></i>
        <span class="cd-text">
        请在
        <span class="cd-time">{{minute}}:{{second}}</span>
        内完成支付,超时订单会自动取消
    </span>
    </div>
    <div class="order clear-fix">
    <span class="block-left">
        <div class="order-name">项目：鹰眼电影 订单编号：{{code}}</div>
    </span>
        <span class="block-right">
        <div class="amount">应付金额 ¥
            <span class="amount-price">{{totalPrice}}
            </span>
        </div>
    </span>
    </div>
    <div class="payment-container">
        <div class="payment payment-0">
            <div class="payment-type">
                <ul class="payment-menu">
                    <li class="payment-tab payment-tab-0"
                        data-target="0">支付宝/微信
                    </li>

                </ul>
                <ul class="payment-tips">

                    <div class="payment-list payment-list-0">
                        <ul class="clear-fix">
                            <li><input type="radio" name="thirdpart_pay" id="thirdpart_pay_wxqrpay" data-type="wxqrpay"
                                       data-banktypeid="" data-bankcode="" checked=""><label class="payment-icon"
                                                                                             for="thirdpart_pay_wxqrpay">
                                <img src="https://p1.meituan.net/pay/pc_wxqrpay.png" disabled="" alt="微信">
                            </label>
                                <span class="payment-weak-tip" style="visibility:visible;">
                        </span>
                            </li>
                            <li>
                                <input type="radio" name="thirdpart_pay" id="thirdpart_pay_alipay" data-type="alipay"
                                       data-banktypeid="" data-bankcode="">
                                <label class="payment-icon" for="thirdpart_pay_alipay">
                                    <img src="https://p0.meituan.net/pay/alipaypcnew.png" disabled="" alt="支付宝">
                                </label>
                                <span class="payment-weak-tip" style="visibility:hidden;">

                        </span>
                            </li>
                        </ul>
                    </div>
                </ul>
            </div>
            <div class="payment-submit-area clear-fix">
                <div class="amount">支付 ¥
                    <span class="amount-price">{{totalPrice}}
                </span>
                </div>
                <div class="payment-submit">
                    <form action="/order/alipay"  method="post">
                        <input type="text" v-model="code" style="display: none" name="out_trade_no">
                        <input type="text" value="鹰眼电影票" style="display: none" name="subject">
                        <input type="text" v-model="totalPrice" style="display: none" name="total_amount">
                        <input id="WIDbody" name="body" style="display: none"/>
                        <input type="text" v-model="id" style="display: none" name="order_id">
                        <button type="submit"  class="btn">去付款</button>
                    </form>

                </div>
                <div class="payment-back">
                    <a href="#" @click="fn()">返回修改订单</a>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入处理时间格式的js文件-->
<script src="http://cdn.staticfile.org/moment.js/2.24.0/moment.js"></script>
<script>
    let vm = new Vue({
        el: "#controller",
        data: {
            second: "",
            minute: "",
            timer: "",
            endtime: "",
            flag: false,
            endtimeNum: "",
            orderCancel: {},
            totalPrice: "",
            code: "",
            id:""
        },
        created: function () {
            let id = location.search.split("=")[1]
            axios.get("/order/cancelOrder?id=" + id).then(function (response) {
                vm.orderCancel = response.data;
                vm.endtimeNum = new Date(vm.orderCancel.cancelDate).getTime()
                vm.totalPrice = vm.orderCancel.totalPrice
                vm.code = vm.orderCancel.code
                vm.id=id;
            })
        },
        mounted: function () {
            let time = setInterval(() => {
                if (vm.flag == true) {
                    clearInterval(time);
                }
                const nowTime = new Date();
                let leftTime = parseInt((vm.endtimeNum - nowTime.getTime()) / 1000);
                vm.second = parseInt(leftTime % 60);
                vm.minute = parseInt(leftTime / 60);
                if (leftTime <= 0) {
                    vm.flag = true
                    location.href = "/index.html"
                }
            }, 1000);
        }
        ,
        methods: {
            fn: function () {
            }
        }
    })
</script>
</body>
</html>